<template>
    <div class="customers">
      <div class="customer-wrapper" v-for="item in list" :key="item.id" >
        <Customer 
          :customerInfo = "item"
          :names="names" 
          :times="times"
          :cur-time="curTime"
          @comfortcustomer="comfortCustomer(item.id)"
          @pay="pay(item.id)"
        >
        </Customer>
      </div>

      <div class="customer-wrapper" v-for="index in emptyCount" :key="'A'+index">
        <div class="empty"></div>
      </div>
      
    </div>
</template>

<script>
import Customer from './Customer.vue'

export default {
  components: { Customer },
  name: 'Customers',
  props:{
    list:Array,
    names:Map,
    times:Map,
    curTime:Number,
    emptyCount:Number
  },
  methods:{
    comfortCustomer(id){
      this.$emit('comfortcustomer',id)
    },
    pay(id){
      console.log(`Customers-id=${id}`)
      this.$emit('pay',id)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .customers{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 24px;
        background-color: #ffa64d;
        border: 12px solid #fff;
        border-radius: 40px;
    }

    .customer-wrapper{
      width: 50%;
      margin-bottom: 10px;
    }

    .empty{
      width: 200px;
      height: 200px;
      border: 12px solid #fff;
      border-radius: 100%;
      background-color: #dddddd;
    }
</style>
